<template>
  <div class="prcList">
    <Loading v-if="loading"></Loading>

    <div class="info" v-else>
      <table class="listInfo">
        <thead>
          <tr>
            <td>编号</td>
            <td>名称</td>
            <td>图片</td>
            <td>标题</td>
            <td>链接</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tableData">
            <td>{{index+1}}</td>
            <td class="txtLeft">{{item.ad_name}}</td>
            <td><img class="logo" :src='item.ad_logo'></td>
            <td>{{item.ad_title}}</td>
            <td>{{item.ad_url}}</td>
            <td>
              <a @click="getMore(item)">修改</a>
              <a @click="getDelete(item)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!--修改商品-->
      <div class="itemInfo" v-if="upStatic">
        <div class="upBg"></div>
        <div class="formBox">
          <p class="item"><span class="name">广告名称 ：</span><input v-model="upData.ad_name" class="slong" placeholder="请输入内容"></input></p>
          <p class="item"><span class="name">广告图片 ：</span>
              <img class="t2" :src="upData.ad_logo">
              <a href="javascript:;" class="file">选择文件<input type="file" @change="upImg" id="imgTest" class="mel" accept=".gif,.jpg,.jpeg,.png"></a>
          </p>
          <p class="item"><span class="name">广告标题 ：</span>
              <input v-model="upData.ad_title" value="" class="solt" placeholder="请输入内容"></input>
          </p>
          <p class="item"><span class="name">广告链接 ：</span>
              <input v-model="upData.ad_url" value="" class="solt" placeholder="请输入内容"></input>
          </p>
          <p class="item inputBox">
            <button @click="submit" class="submitInput">确定</button>
            <button @click="empty" class="emptyInput">取消</button>
          </p>
        </div>
      </div>

  </div>
</template>
<script>
import Vue from 'vue'
import Loading from '@/components/loading'
import axios from 'axios'
import { Get, Post ,Put ,Delete} from '@/config/api'
export default {
  name: 'prcList',
  data() {
    return {
      loading: false,
      upStatic: false,
      tableData: [],
      upData:{
        id:'',
        ad_position:2,
        ad_name:'',
        ad_title:'',
        ad_logo:'',
        ad_url:''
      }
    }
  },
  filters:{
      tpye(vule){
        if(vule=='1'){
          return '是'
        }else{
          return '否'
        }
      }
  },
  mounted() {
    this.getPrcList()
  },
  components: {
    Loading
  },
  computed:{

  },
  methods: {
    //获取商品列表
    async getPrcList(){
        let reg=await Get('/ad',this.$store.state.token)
        console.log(reg)
        this.tableData=reg.data
    },
    //删除广告
    async getDelete(val){
        let reg=await Delete('/ad/'+val.id,this.$store.state.token)
        console.log(reg)
        this.getPrcList()
    },
    //修改广告
    async getMore(val){
        this.upStatic=true
        this.upData.id=val.id
        this.upData.ad_name=val.ad_name
        this.upData.ad_title=val.ad_title
        this.upData.ad_logo=val.ad_logo
        this.upData.ad_url=val.ad_url
    },
    //取消修改
    empty(){
      this.upStatic=false
    },
    //图片上传
    upImg(e){
      let file = e.target.files[0]; //input 
      if( file.size > 0.3*1024*1024 ){  //用size属性判断文件大小不能超过200k
        alert( "你上传的文件太大了！" ) 
      }else{
        let that=this
        let reader = new FileReader(); 
        reader.readAsDataURL(file); 
        reader.onload = function(e){ 
          var res = this.result; 
          that.upData.ad_logo=this.result 
        } 
      } 
    },
    //提交商品修改信息
    async submit() {
      let data;
      this.$store.dispatch("loadOpen");
      if (this.upData.ad_logo.length < 100) {
        data = {
          "ad_position":this.upData.ad_position,
          "ad_name":this.upData.ad_name,
          "ad_title":this.upData.ad_title,
          "ad_url":this.upData.ad_url,
          "ad_text":this.upData.ad_text
        }
      } else {

        data = {
          "ad_position":this.upData.ad_position,
          "ad_name":this.upData.ad_name,
          "ad_title":this.upData.ad_title,
          "ad_logo":this.upData.ad_logo,
          "ad_url":this.upData.ad_url,
          "ad_text":this.upData.ad_text
        }
      }
      await Put('/ad/'+this.upData.id,this.$store.state.token,data).then(()=>{
        this.getPrcList()
        this.$store.dispatch("loadClose");
      }).catch(()=>{
        this.getPrcList()
        this.$store.dispatch("loadClose");
      })
      this.upStatic=false
    }
  }
}

</script>
